<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {padding:0;margin:0;box-sizing:border-box;}
    *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    body {font-size: 14px;background: #f5f5f5;}
    button {padding:10px 25px;border:1px solid #ddd;background:#fff;border-radius:5px;color:#555;cursor: pointer;}


/*颜色*/
:root{--dark:#5d677c;--dark-hover:#384253;--tpl:#525CE5;--tpl-hover:#7773d7;--default:#8783e1;--default-hover:#7773d7;--red:#f1716c;--red-hover:#d15451;--orange:#f57e00;--orange-hover:#cf6c03;--yellow:#fac413;--yellow-hover:#e9b712;--green:#26bc5c;--green-hover:#179b47;--cyan:#8cd03d;--cyan-hover:#7dc22d;--blue:#768fe7;--blue-hover:#677ecf;--purple:#9e83e1;--purple-hover:#896eca;--white:#ffffff;--white-hover:#f5f5f5;--gray:#b2b2b2;--gray-hover:#989898;--black:#4a4a4a;--black-hover:#000000;}



/*message 全局提示 错误|提醒|正确*/
.message-notice {position: fixed;top:0;left:0;width:100%;font-size:14px;transition: all .3s ease;text-align: center;z-index:1000;}
.message-notice p {display:inline-block;min-width:300px;max-width: 600px;padding:15px 25px 15px 38px;color:#333;border:1px solid #e3e2e2;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.15);background:#fff;text-align:left;position: relative;line-height:22px;}  
.message-notice p i {position: absolute;top:18px;left:13px;}
.message-notice.success p {background-color: #f6ffed;border-color:#b7eb8f;color:#67c23a;}
.message-notice.warning p {background-color: #fdf6ec;border-color:#e7d7c0;color:#e6a23c;}
.message-notice.error p {background-color: #fef0f0;border-color:#f3cdcd;color:#f56c6c;}
.slide-fadeIn {
    opacity: 0;
    -webkit-animation:slide-fadeIn .3s ease both;
            animation:slide-fadeIn .3s ease both;    
}
.slide-fadeOut {
    opacity: 1;transform: translateY(35px);
    -webkit-animation:slide-fadeOut .3s ease-out both;
            animation:slide-fadeOut .3s ease-out both;    
}
@-webkit-keyframes slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}
@keyframes slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}
@-webkit-keyframes slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}
@keyframes slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}

</style>

</head>
<body>

<div style="padding:100px;">

    <button class="layui-btn layui-btn-primary msg">提示</button>
    <button class="layui-btn layui-btn-primary success">成功</button>
    <button class="layui-btn layui-btn-primary warning">警告</button>
    <button class="layui-btn layui-btn-primary danger">错误</button>


</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<link rel="stylesheet" href="https://www.layui.site/res/layui/dist/css/layui.css">
<script>
$(function(){

    var codeFlag = true;

    $('.msg').click(function() {
        messageNotice('提示')
        btnload(this);
    })

    $('.success').click(function() {
        messageNotice('签到成功',1)
        btnload(this);
    })

    $('.warning').click(function() {
        messageNotice('警告',3)
        btnload(this);
    })

    $('.danger').click(function() {
        messageNotice('错误',2)
        btnload(this);
    })

    function btnload(e) {
        var _this = $(e);
        if(codeFlag) {
            codeFlag = false;
            btnLoading.add(_this);
            // 演示内容，模拟提交后的事件
            setTimeout(function() {
                btnLoading.remove(_this);
                codeFlag = true;
            },2000);
        }
    }



    /**
     * message 信息提示
     * @param  {[type]} info [内容信息]
     * @param  {[type]} type [类别：success|error|warning,默认不需要填，就是普通提示]
     */
    messageNotice = function(info,type){
        var _t,_icon;
        switch (type){
            case 1:
                _t = 'success';
                _icon = '<svg t="1586399279307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5668" width="15" height="15"><path d="M512 1024C229.2352 1024 0 794.7648 0 512S229.2352 0 512 0s512 229.2352 512 512-229.2352 512-512 512z m271.5264-653.7088l-54.2976-54.3104-307.7376 307.7376-126.72-126.72-54.2976 54.3104L385.28 696.128l36.1984 36.1984z" fill="#67c23a" p-id="5669"></path></svg>';
                break;
            case 2:
                _t = 'error';
                _icon = '<svg t="1586398977558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3454" width="15" height="15"><path d="M512.345 2.207c-281.254 0-509.254 228-509.254 509.254s228 509.254 509.254 509.254 509.253-228 509.253-509.253-228-509.255-509.253-509.255z m223.847 663.93c19.628 19.672 19.628 51.58 0 71.252-9.813 9.836-22.676 14.76-35.538 14.76-12.861 0-25.724-4.925-35.539-14.76l-153.14-153.644-153.14 153.642c-9.814 9.836-22.677 14.76-35.532 14.76-12.869 0-25.724-4.925-35.538-14.76-19.628-19.672-19.628-51.58 0-71.253l153.14-153.648-153.141-153.641c-19.628-19.672-19.628-51.58 0-71.253 19.628-19.665 51.442-19.665 71.07 0l153.14 153.642 153.141-153.642c19.635-19.665 51.442-19.665 71.078 0 19.628 19.672 19.628 51.58 0 71.253L583.051 512.486l153.141 153.65z" fill="#d81e06" p-id="3455"></path></svg>';
                break;
            case 3:
                _t = 'warning';
                _icon = '<svg t="1586399013003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4345" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#F8F8F8" fill-opacity="0" p-id="4346"></path><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6 460.8 460.8 0 0 1 0-921.6zM438.272 281.0368l9.8304 246.3744c1.3824 34.304 29.5936 61.3888 63.8976 61.3888s62.464-27.136 63.744-61.44l9.216-246.272A73.5232 73.5232 0 0 0 511.488 204.8a73.3184 73.3184 0 0 0-73.216 76.2368zM435.2 741.888v0.512A76.8 76.8 0 0 0 512 819.2a76.288 76.288 0 0 0 76.288-76.8v-0.512A76.8 76.8 0 0 0 511.488 665.6a76.288 76.288 0 0 0-76.288 76.288z" fill="#e6a23c" p-id="4347"></path></svg>';
                break;
            default:
                _icon = '<svg t="1586399045233" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4625" width="15" height="15"><path d="M522.318769 273.329231a58.919385 58.919385 0 1 0 58.919385-58.604308 57.186462 57.186462 0 0 0-58.919385 58.604308zM391.325538 476.790154a280.339692 280.339692 0 0 0 0 34.422154l51.357539-61.833846a40.014769 40.014769 0 0 1 29.223385-17.565539 13.312 13.312 0 0 1 7.876923 16.462769l-85.07077 281.757539a56.792615 56.792615 0 0 0 53.878154 72.625231 176.443077 176.443077 0 0 0 144.068923-102.4 277.740308 277.740308 0 0 0 0.945231-35.524924l-51.436308 61.912616a41.275077 41.275077 0 0 1-30.168615 17.565538 13.154462 13.154462 0 0 1-7.876923-14.887384l85.622154-283.175385a57.816615 57.816615 0 0 0-53.090462-72.861538 219.293538 219.293538 0 0 0-145.329231 103.502769zM512.393846 0a512 512 0 1 1-512 512 512 512 0 0 1 512-512z" fill="#515151" p-id="4626"></path></svg>';
        }
        if($('.message-notice').length == 0){
            $('body').append('<div class="message-notice slide-fadeIn '+_t+'"><p><i>'+_icon+'</i>'+info+'</p></div>');
            setTimeout(function(){
                $('.message-notice').addClass('slide-fadeOut');
                $('.message-notice').removeClass('slide-fadeIn');
                setTimeout(function(){
                    $('.message-notice').remove();
                },300)
            },2000);
        }
    };


    /**
     * 按钮loading事件
     * @param  {[type]} elem [按钮元素]
     */
    btnLoading = {
        add:function(elem){
            $(elem).addClass('layui-btn-disabled');
            $(elem).prepend('<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i> ');
        },
        remove:function(elem){
            $(elem).removeClass('layui-btn-disabled');
            $(elem).children('.layui-icon-loading').remove();
        }
    }


})
</script>

</body>
</html>